<!--
 * @description  : 内部监管开发测试用首页
 * @descriptionDetail: 内部监管开发测试用首页
 * @copyright    : 浙江烟草
 * @author       : lcm
 * @create       : 2022-09-27 09:58:58
-->

<template>
  <view class="page">
    <view class="custom-lay">
      <view class="custom-head">
        <theme-navbar :is-transport="true" :is-back="false" title="内部监管">
        </theme-navbar>
      </view>
      <view class="custom-head-title">
        内部监管开发测试用首页
      </view>
      <view class="custom-head-img">
        <u-image mode="widthFix" width="88%" src="../../../static/banner.png"></u-image>
      </view>
    </view>
    <view class="content content-bg ifn-content">
      <u-grid :col="3" :border="false">
        <u-grid-item :index="index" v-for="(item,index) in configs" :key="item.id" @click="gridClick">
          <u-icon :name="item.png" size="100"></u-icon>
          <view class="grid-text">
            {{ item.title }}
          </view>
        </u-grid-item>
      </u-grid>
    </view>
  </view>
</template>

<script>
export default{
  data() {
    return {
      configs:[
        {id:101,url:"/pages/internal/fieldAudit/index",title:"实地核查",png:'../../../static/internal/icon_fieldAudit.png',},
        {id:103,url:"pages/internal/dataView/realCigFlow",title:"真烟流动",png:'../../../static/internal/icon_realCigFlow.png',},		
      ],
      userInfo:undefined,
    };
  },
  onLoad(option) {
    this.userInfo = JSON.parse(uni.getStorageSync('user'));
  },
  mounted() {
  },
  methods: {
    gridClick:function(index){
      if(!this.$u.test.isEmpty(this.configs[index].url)){
        this.$u.route(this.configs[index].url);
      }else{
        this.$modal.alert('功能未实现');
      }
    },
  },
};
</script>

<style lang="scss" scoped>
	uni-page-body{
			height: 100%;
		}
		.custom-lay{
            background: #ffffff;
            background-image: url(../../../static/topbj.png);
            background-position: left top;
            background-repeat: round;
            background-size: cover;
            position: relative;
            .custom-head-title{
                position: absolute;
                left: 0;
                bottom: 0;
                background-image: url(../../../static/locationInfo.png);
                background-position: 5% bottom;
                background-repeat: no-repeat;
                background-size: 50%;
                padding:0 0 5rpx 45rpx;
                color: #666666;
                font-size: 16px;
            }
            .custom-head-img{
               display: flex;
               justify-content: center;
            }
		}
		.grid-text{
			color: #666680;
            font-size: 30rpx;
		}
        
	.page{
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		.nav-right-icon{
			margin-right: 30rpx;
			font-size: .8rem;
		}
		.content {
			//height: 200vh;
			height: calc(100% - 244px);
			height: calc(100% - 244px - constant(safe-area-inset-top));
			height: calc(100% - 244px - env(safe-area-inset-top));
			padding: 20rpx 5rpx;
		}
		.content-bg{
			background-color: #fff;
		}
		.slot-wrap {
			display: flex;
			align-items: center;
			/* 如果您想让slot内容占满整个导航栏的宽度 */
			/* flex: 1; */
			/* 如果您想让slot内容与导航栏左右有空隙 */
			/* padding: 0 30rpx; */
		}
		.navbar-right {
			margin-right: 24rpx;
			display: flex;
		}
		
		.right-item {
			margin: 0 12rpx;
			position: relative;
			color: $u-main-color;
			display: flex;
		}
		.ifn-content{
			padding: 0rpx 5rpx 0rpx !important;
		}
	
	}
</style>
